
<template>
  <div class="student-detail-main">
    <!--弹出框  -->
    <el-dialog
      title="学员个人信息"
      :visible.sync="dialogVisible"
      width="68%"
      :before-close="handleClose"
    >
      <el-form ref="infoForm" :model="form" label-width="80px" :rules="rules">
        <el-card shadow="never" class="card">
          <div slot="header">
            <span>基本资料</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="年龄" prop="age">
                <el-input v-model="form.age" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="性别" prop="sex">
                <el-radio v-model="form.sex" label="0">男</el-radio>
                <el-radio v-model="form.sex" label="1">女</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="电话" prop="tel">
                <el-input v-model="form.tel" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="身份证号">
                <el-input v-model="form.manId" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="城市" prop="cityText">
                <el-cascader
                  v-model="selectCitys"
                  size="small"
                  :options="options"
                  @change="handleChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="宿舍">
                <el-select
                  v-model="form.dormId"
                  size="mini"
                  placeholder="选择宿舍"
                  clearable
                >
                  <el-option
                    v-for="item in dormList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="班级" prop="classId">
                <el-select
                  v-model="form.classId"
                  size="mini"
                  placeholder="选择班级"
                  clearable
                >
                  <el-option
                    v-for="item in classList"
                    :key="item.id"
                    :label="item.className"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="入住日期">
                <el-date-picker
                  v-model="form.startTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  size="small"
                  placeholder="选择入住时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="离开日期">
                <el-date-picker
                  v-model="form.startTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  size="small"
                  placeholder="选择离开时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>

        <el-card shadow="never" class="card">
          <div slot="header">
            <span>补充信息</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="紧急联络人" label-width="100px">
                <el-input v-model="form.tel2" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="微信">
                <el-input v-model="form.wx" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="QQ">
                <el-input v-model="form.qq" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="毕业院校">
                <el-input v-model="form.school" size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="工作经历">
                <el-input v-model="form.job" size="small" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
      </el-form>

      <!-- 交费信息 -->
      <el-card shadow="never" class="card">
        <div slot="header">
          <span>交费信息</span>
          <el-button
            type="primary"
            size="small"
            @click="costFormShow = !costFormShow"
            >{{ costFormShow ? "关闭交费窗口" : "打开交费窗口" }}</el-button
          >
        </div>
      </el-card>
      <!-- 交费信息表单 -->
      <el-form
        v-show="costFormShow"
        ref="costForm"
        :model="costForm"
        label-width="80px"
        :inline="false"
        size="normal"
        style="padding: 0 20px"
      >
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="交费类型" size="small">
              <el-select v-model="costForm.costType">
                <el-option label="学费" value="0" />
                <el-option label="住宿费" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="金额">
              <el-input v-model="costForm.costValue" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="交费时间">
              <el-date-picker
                v-model="costForm.costTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择缴费时间"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="备注">
          <el-input
            v-model="costForm.costBak"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
        </el-form-item>
        <el-col :span="8" :offset="20">
          <div class="cost-btn">
            <el-button size="small" @click="costFormShow = false"
              >取消</el-button
            >
            <el-button size="small" type="primary" @click="addCostItem"
              >暂存</el-button
            >
          </div>
        </el-col>
      </el-form>

      <!-- 显示已经交费的记录 -->
      <el-table :data="costList" border stripe>
        <el-table-column prop="costType" label="交费类型" width="200" />
        <el-table-column prop="costValue" label="金额" width="200" />
        <el-table-column prop="costTime" label="交费时间" width="200" />
        <el-table-column prop="costBak" label="备注" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              style="color: red"
              size="small"
              @click="removeCostItem(scope.row.tempId)"
              v-show="scope.row.tempId"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from "element-china-area-data";
import {
  studentSave as studentSaveApi,
  studentDetail as studentDetailApi,
  studentUpdate as studentUpdateApi,
  costList as costListApi,
} from "@/api/xy/student";

export default {
  name: "XyStudentDetail",
  props: {
    "class-list": {
      type: Array,
      required: true,
    },
    "dorm-list": {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: false, // 弹框是否显示
      options: regionDataPlus,
      selectCitys: [], // 对应的model
      selectCityText: [], // 对应的城市字符串
      costFormShow: false,
      costList: [],
      form: {},
      costForm: {},
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        tel: [{ required: true, message: "请输入电话", trigger: "blur" }],
        cityText: [{ required: true, message: "请填写地址", trigger: "blur" }],
        classId: [{ required: true, message: "请选择班级", trigger: "blur" }],
      },
    };
  },
  methods: {
    openDialog(id) {
      this.dialogVisible = true;
      // 如果传递了id  说明是更新
      if (id) {
        studentDetailApi({ id }).then((res) => {
          console.log(res);
          //需要对获取的数据 根据页面组建的需求 重新格式化
          if (res.data.city) {
            this.selectCitys = res.data.city.split(",");
          }
          this.form = res.data;
          // 获取交费记录
          this.getCostList(id);
        });
      }
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
            this.$refs.infoForm.resetFields();
            this.$refs.costForm.resetFields();
            this.costList=[];
            done();
        })
        .catch((_) => {});
    },
    doSave() {
      var api = null;
      var xyUser = this.form;
      var data = {
        xyUser,
      };
      //筛选新增的costList数据
      var newCostList = [];
      newCostList = this.costList.filter(item=>item.tempId!=null );
      // 追加交费记录
      data._size = newCostList.length;
      for (var i = 0; i < newCostList.length; i++) {
        var costItem =newCostList[i];
        //删除某个属性 tempId是前台临时用于移除的 后台无效
        delete costItem.tempId;
        data["xyCostItems_" + i] = costItem;
      }
      if (this.form.id) {
        api = studentUpdateApi;
      } else {
        api = studentSaveApi;
      }
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          api(data).then((res) => {
            console.log(res);
            // 友好提示
            this.$message.success("添加成功!");
            // 1. 清空表单
            this.$refs.infoForm.resetFields();
            // 2. 关闭弹窗
            this.dialogVisible = false;
            // 3. 刷新父类列表  $emit
            this.$emit("refrush");
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleChange(value) {
      if (value.length > 0) {
        value.forEach((item) => {
          this.selectCityText.push(CodeToText[item]);
        });
      }
      console.log(this.selectCityText);
      this.form.city=this.selectCitys.join();
      this.form.cityText = this.selectCityText.join();
    },
    removeCostItem(tempId) {
      var index = this.costList.findIndex((el) => el.tempId == tempId);
      this.costList.splice(index, 1);
    },
    addCostItem() {
      var newCostForm = {};
      for (var key in this.costForm) {
        newCostForm[key] = this.costForm[key];
      }
      newCostForm.tempId = new Date().getTime();
      this.costList.push(newCostForm);
      this.costForm={}
    },
    getCostList(userId) {
      costListApi({ userId }).then((res) => {
        console.log(res);
        this.costList = res.data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.student-detail-main {
  .card {
    margin: 0 20px;
    border: none;
  }
  .cost-btn {
    margin-bottom: 20px;
  }
  .el-form {
    .el-form-item__label {
      text-align: center;
    }
  }
}
</style>
